<template>
  <div class="mod-config">
    <basic-container>
        <!-- <navigationHeTong :sign="{a:false,b:true,c:false,d:false,e:false,f:false}"></navigationHeTong> -->
      <div class="boxsty zhiBiao" v-if="zhiShow == 1">
          <div style="height: 50px; border-bottom: 1px solid #b0bde2">
              <el-button type="primary" @click="submitAll">批量提交</el-button>
          </div>
            <!-- <div style="height: 50px; border-bottom: 1px solid #b0bde2">
                <el-button type="primary" @click="nidingHz">拟定汇总</el-button>
                <el-button type="primary">模板下载</el-button>
               <el-button type="primary">批量导入</el-button>
               <el-button type="primary">批量拟定</el-button>
                <el-button type="primary" @click="submitAll">批量提交</el-button>
            </div>
            <div  class="flex">
                <div class="mt10">
                    业绩合同
                    <span>
                        <el-radio v-model="radio" label="1">个人</el-radio>
                        <el-radio v-model="radio" label="2">机构</el-radio>
                    </span>
                    <span style="margin-left:160px;">
                        数据范围
                       <el-radio-group v-model="radioTwo">
                          <el-radio v-for="item in radioTwoList" :label="item.value">{{ item.name }}</el-radio>
                        </el-radio-group>
                    </span>
                </div>
            </div> -->
            <el-table :data="dataList"
                style="width: 100%;margin-top:20px"
                @load="dataListLoading"
                ref="tableRef">
                <el-table-column :selectable='checkboxSelect' type="selection" width="55" header-align="center" align="center"></el-table-column>
                <el-table-column type="index" width="60" header-align="center" align="center" label="序号"></el-table-column>
                <el-table-column prop="contractName" label="合同名称" width="160" header-align="center" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status == 0" @click="checkDetails(scope.row)" style="color:#0e258c;cursor: pointer;">{{scope.row.contractName}}</span>
                        <span v-else>{{scope.row.contractName}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="shouyueName"
                        header-align="center"
                        align="center"
                        min-width="120"
                        label="受约人姓名">
                        <template slot-scope="scope">
                        <div v-for="(item,index) in cutout(scope.row.shouyueName).slice(0, 2)">
                            <el-tooltip class="item" :disabled="cutout(scope.row.shouyueName).length<3" effect="dark" :content="scope.row.shouyueName" placement="top-start">
                            <span>{{item}}<span v-if="cutout(scope.row.shouyueName).length>2&&index==1">...</span></span>
                            </el-tooltip>
                        </div>
                        </template>
                    </el-table-column>
                    <el-table-column
            prop="shouyueZhiwu"
            header-align="center"
            align="center"
            min-width="180"
            label="受约人职务">

            <template slot-scope="scope">
              <div v-for="item in cutout(scope.row.shouyueZhiwu).slice(0, 2)">
                <el-tooltip class="item"  :disabled="item.length<8&&cutout(scope.row.shouyueZhiwu).length<3" effect="dark" :content="scope.row.shouyueZhiwu" placement="top-start">
                  <span>{{validatenull(item)?'-':item | ellipsis}}</span>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="fayueName"
            header-align="center"
            align="center"
            min-width="120"
            label="发约人姓名">
            <template slot-scope="scope">
              <div v-for="(item,index) in cutout(scope.row.fayueName).slice(0, 2)">
                <el-tooltip :disabled="cutout(scope.row.fayueName).length<3" class="item" effect="dark" :content="scope.row.fayueName" placement="top-start">
                <span>{{item}}<span v-if="cutout(scope.row.fayueName).length>2&&index==1">...</span></span>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="fayueZhiwu"
            header-align="center"
            align="center"
            min-width="180"

            label="发约人职务">
            <template slot-scope="scope">
              <div v-for="item in cutout(scope.row.fayueZhiwu).slice(0, 2)">
                <el-tooltip class="item" :disabled="item.length<8&&cutout(scope.row.fayueZhiwu).length<3" effect="dark" :content="scope.row.fayueZhiwu" placement="top-start">
                    <span>{{(validatenull(item)?'-':item) | ellipsis}}</span>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
                <el-table-column prop="zhibiaoNum" label="指标数量" min-width="80" header-align="center" align="center"></el-table-column>
                <el-table-column prop="signLevel" label="合同级别" min-width="100" header-align="center" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.signLevel == '1'">一级合同</span>
                        <span v-if="scope.row.signLevel == '2'">二级合同</span>
                        <span v-if="scope.row.signLevel == '3'">三级合同</span>
                        <span v-if="scope.row.signLevel == '4'">四级合同</span>
                        <span v-if="scope.row.signLevel == '5'">五级合同</span>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" min-width="120" header-align="center" align="center">
                    <template slot-scope="scope">
                        <el-popover
                            placement="left"
                            width="380"
                            trigger="hover">
                            <p>{{scope.row.fayueName}}</p>
                            <el-table :data="scope.row.gridData" v-if="scope.row.status == 1">
                                <el-table-column width="90" property="zbname" label="指标名称" show-overflow-tooltip></el-table-column>
                                <el-table-column width="90" property="name" label="姓名"></el-table-column>
                                <el-table-column width="90" property="zhiwu" label="职务"></el-table-column>
                                <el-table-column width="90" property="status" label="状态">
                                    <template slot-scope="smallScope">
                                        <span v-if="smallScope.row.status == '2'">通过</span>
                                        <span style="color:#ff3300" v-if="smallScope.row.status == '1'">驳回</span>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div slot="reference" class="name-wrapper">
                                <span v-if="scope.row.status == 0">未提交</span>
                                <span v-if="scope.row.status == 1&&scope.row.zhuangtai!=1">已提交</span>
                                <span style="color:#ff3300" v-if="scope.row.status == 1&&scope.row.zhuangtai == 1">已提交</span>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="操作" v-if="rowStatus" width="200" header-align="center" align="center" fixed="right">
                    <template slot-scope="scope">
                        <!-- <el-button type="primary" plain v-if="scope.row.status == 0" @click="checkDetails(scope.row)">编辑查看#</el-button> -->
                        <div style="display:none">{{rowStatus=scope.row.status == 0?true:false}}</div>
                        <el-button type="primary" plain v-if="scope.row.status == 0" @click="submit(scope.row)">提交#</el-button>
                    </template>
                </el-table-column>
            </el-table>
      </div>
      <zhibiaoForm v-if="zhiShow == 2" ref="zhibiaoFormRef" :zhibiaoForm='zhibiaoForm' :hetong="hetong" :hetongId="hetongId" v-on:zhibiaoChild='zhibiaoChild'></zhibiaoForm>
      <!--      拟定汇总-->
      <TianBaoTable v-if="zhiShow == 3" ref="tianbaotable" :tianBaoTable="tianBaoTable" @fnBackOldPage="fnBackOldPage"></TianBaoTable>
      </basic-container>
  </div>
</template>

<script>
import zhibiaoForm from '@/views/hetongrenwu/components/zhibiao-form.vue'
import TianBaoTable from '@/views/hetongrenwu/components/htndhuizong-table.vue'
import {fetchList, submitStatus, submitStatusAllPro, fetchListChild} from '@/api/hetongrenwu/hetongyeji/hetongnd'
import {radioTwoList} from '@/api/hetongrenwu/hetonghtxxdjb'
import { validatenull } from "@/util/validate";
import { getMainOrChild } from '@/api/workflow/ht'

export default {
    components:{
        zhibiaoForm,
        TianBaoTable
    },
    data(){
        return{
            hetong: {},
            streamId: Number,
            hetongId: Number,
            dataListLoading: false,
            rowStatus:false,
            form: {},
            radio: '1',
            radioTwo:'-1',
            dataList: [],
            pageIndex: 1,
            pageSize: 10,
            totalPage: 0,
            zhiShow: 1,
            zhibiaoForm: {},
            searchadvanced: true,
            searchheight: '0',
            radioTwoList:radioTwoList,
            tianBaoTable:{

            },
            streamType: ''
        }
    },
  filters:{
        ellipsis(value){
          if (!value) return '';
          if (value.length > 8) {
            return value.slice(0,8) + '...'
          }
          return value
        }
      },
    methods:{
        init(formInfo,
            formInfoDetailed,
            formData,
            GUID,
            wfYwMain,
            wfYwStream,
            dqYwStream,
            dqTask){
                this.streamId = dqYwStream.id
                this.form.htId = wfYwMain.ywLyid
                getMainOrChild(this.streamId).then(res => {
                    this.streamType = res.data.data
                    this.getDataList()
                })
        },
        getFormData() {
            this.$emit("returnFormData", null);
        },
        searchchangeadvanced() {
            this.searchadvanced = !this.searchadvanced;
            if(this.searchadvanced){
                this.searchheight= 'auto'
            }
        },
        //获取合同列表
        getDataList () {
            this.dataListLoading = true
            if(this.streamType == 'child'){
                fetchListChild(Object.assign({
                    current: this.pageIndex,
                    size: this.pageSize,
                    streamId: this.streamId
                    },this.form)).then(response => {
                    this.dataList = response.data.data.records
                    this.totalPage = response.data.data.total
                })
            }else{
                fetchList(Object.assign({
                    current: this.pageIndex,
                    size: this.pageSize
                    },this.form)).then(response => {
                    this.dataList = response.data.data.records
                    this.totalPage = response.data.data.total
                })
            }
            this.dataListLoading = false
        },
        //提交
        submit(row){
            this.$confirm('是否要提交该条数据?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                submitStatus(row.id).then(res => {
                    this.$message({
                        type: 'success',
                        message: '提交成功!'
                    });
                    this.getDataList()
                }).catch(() => {
                    this.$message({
                        type: 'error',
                        message: '提交失败!'
                    });
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消提交'
                });
            });
        },
        //提交
        submitAll(){
            const rows = this.$refs.tableRef.selection
            if(rows.length > 0){
                this.$confirm('是否要提交' + rows.length + '条数据?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    submitStatusAllPro({"rows": rows, "streamId": this.streamId}).then(res => {
                        this.$message({
                            type: 'info',
                            message: res.data.data + '条合同已提交'
                        });
                        this.getDataList()
                    }).catch(() => {
                        this.$message({
                            type: 'error',
                            message: '提交失败!'
                        });
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消提交'
                    });
                });
            }else{
                this.$message({
                    type: 'info',
                    message: '请选择数据提交!'
                });
            }
        },
        //编辑查看
        checkDetails(row){
            this.zhiShow=2;
            this.hetongId = row.htId
            this.hetong = row
            this.zhibiaoForm={
                enter:1,
                disabled:false
            }
            this.$nextTick(() => {
                this.$refs.zhibiaoFormRef.setStream(this.streamId,this.streamType)
                this.$refs.zhibiaoFormRef.getDataList()
            })
        },
        //子集信息
        zhibiaoChild(zhibiaoChild){
            if(zhibiaoChild){
                this.zhiShow=1
                this.getDataList()
            }
        },
        // 每页数
        sizeChangeHandle(val) {
            this.pageSize = val
            this.pageIndex = 1
            this.getDataList()
        },
        // 当前页
        currentChangeHandle(val) {
            this.pageIndex = val
            this.getDataList()
        },
        checkboxSelect (row, rowIndex) {
            if (row.status == 0) {
                return true
            }else{
                return false
            }
        },
      //拆分数据
    cutout(cellValue) {
      if (cellValue) {
        var c = cellValue.split(",");
        if(c.size<1){
          c.push('-');
          c.push('-');
        } else if(c.size<2){
          c.push('-');
        }
        return c;
      }
    },
      //判空
      validatenull(val){
        return validatenull(val)
      },
      nidingHz(){
        this.zhiShow=3;
      },
      fnBackOldPage(data){
        this.zhiShow=1;
      },
    }
}
</script>

<style>

</style>
